<template>
	<view class="list" v-if="list.length > 0">
		<view class="" v-for="(item, indexs) in list" :key="indexs" v-if="item.type == typeActivy">
			<navigator v-if="item.type==1" style="background: #fff;" :url="'/pages/article/article?id=' + item.id"
				class="item" hover-class="none">
				<view class="title"
					style="line-height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
					<span v-if="item.is_top==1"
						style="border-radius: 6px; border: #EA9B37 solid 1px; color: #EA9B37; padding: 0px 4px; font-size: 10px; margin-right: 6px;">置顶</span>
					{{ item.title }}
				</view>
				
				<view style="width: 100%;display: flex;text-align: center; overflow: hidden; border-radius: 6px;">
					<!-- <image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image> -->
					<view v-for="(items,i) in item.images" v-if="i<3" class="listboxlist"
						style=" flex:1;margin-right:10px; overflow: hidden; border-radius: 6px;">
						<image style="width: 100%;" :src="items" mode="widthFix"></image>
					</view>

				</view>
				<view class="" style="margin-top:25rpx;color: #CCCCCC;">
					{{ item.create_time }}发布
				</view>
				<view class="line"></view>
			</navigator>
			<navigator v-if="item.type==0" style="background: #fff;" :url="'/pages/detail/detail?id=' + item.id"
				class="item" hover-class="none">
				<view class="title"
					style="line-height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
					<span v-if="item.is_top==1"
						style="border-radius: 8px; border: #EA9B37 solid 1px; color: #EA9B37; padding: 4px 8px; font-size: 12px; margin-right: 6px;">置顶</span>
					{{ item.content }}
				</view>
				<view style="width: 100%;display: flex;text-align: center; overflow: hidden; border-radius: 6px;">
					<!-- <image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image> -->
					<view v-for="(items,i) in item.images" v-if="i<3" class="listboxlist"
						style=" flex:1;margin-right:10px; overflow: hidden; border-radius: 6px;">
						<image style="width: 100%;" :src="items" mode="widthFix"></image>
					</view>
				</view>
				<view class="" style="margin-top:25rpx;color: #CCCCCC;">
					{{ item.create_time }}发布
				</view>
				<view class="line"></view>
			</navigator>
			<navigator v-if="item.type==2" style="background: #fff;" :url="'/pages/detail/detail?id=' + item.id"
				class="item" hover-class="none">
				<view class="title"
					style="line-height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
					<span v-if="item.is_top==1"
						style="border-radius: 8px; border: #EA9B37 solid 1px; color: #EA9B37; padding: 4px 8px; font-size: 12px; margin-right: 6px;">置顶</span>
					{{ item.content }}
				</view>
				<view style="width: 100%;display: flex;text-align: center; overflow: hidden; border-radius: 6px; position: relative;">
					<view style="position: absolute; z-index: 1; top: 50%; left: 50%; transform:translate(-50%,-50%)">
						<u-icon color="#fff" size="40px" name="play-right-fill"></u-icon>
					</view>
					<image style="width: 100%;" mode="widthFix" :src="item.video+'?vframe/jpg/offset/1'"></image>
					<!-- <video :src="" controls></video> -->
				</view>
				<view class="" style="margin-top:25rpx;color: #CCCCCC;">
					{{ item.create_time }}发布
				</view>
				<view class="line"></view>
			</navigator>
			<navigator v-if="item.goods_title&&item.goods_url" :url="'/pages/public/webHtml?url=' + item.goods_url" style="background: #fff;" 
				class="item" hover-class="none">
				<!-- 商品链接 -->
				<view
					style="width: 100%;height: 198rpx; display: flex;background-color: #FFFFFF;align-items: center;"
					 @click="goUrl(item.goods_url)">
					<view class="">
						<image :src="item.goods_image"
							style="width: 154rpx;height: 154rpx;border-radius: 20rpx;margin-left: 27rpx;margin-right: 19rpx;"
							mode=""></image>
					</view>
					<view class="" style="font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;">
						<view class="" style="width: 300rpx;white-space: nowrap;
				    text-overflow: ellipsis;
				    overflow: hidden;
				    word-break: break-all;">
							{{item.goods_title}}
						</view>
						<view class="" style="margin-top: 24rpx;color: #FC3A00;">
							¥{{item.goods_price}}起
						</view>
					</view>
				</view>
				<view class="line"></view>
			</navigator>
			<!-- 		<navigator  style="background: #fff;" :url="'/pages/article/article?id=' + item.id" class="item" v-for="(item, index) in list" :key="index" hover-class="none">
			<view class="title" style="line-height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
			<span style="border-radius: 8px; border: #EA9B37 solid 1px; color: #EA9B37; padding: 4px 8px; font-size: 12px; margin-right: 6px;">置顶</span>{{ item.title }}
			</view>
			<view style="display: flex;text-align: center;">
				<view class="listboxlist" style=" flex:1; height: 86px;margin-right:10px; overflow: hidden; border-radius: 6px;">
					<image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image>
				</view>
				<view class="listboxlist" style=" flex:1; height: 86px;margin-right: 10px; overflow: hidden; border-radius: 6px;">
					<image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image>
				</view>
				<view class="listboxlist" style="flex:1; height: 86px;margin-right: 10px; overflow: hidden; border-radius: 6px;">
					<image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="line"></view>
		</navigator> -->
			<!-- <navigator v-if="item.type==0" style="background: #fff;" :url="'/pages/detail/detail?id=' + item.id"
				class="item"  hover-class="none">
				<view class="info">
					<view class="text">
						<view class="title">{{ item.title}}</view>
						<view class="other">
							<view class="left">
								<view class="source" v-if="item.source">{{ item.source }}</view>
								<view class="time">{{ item.create_time }}</view>
							</view>
							<view class="right" v-if="item.comment_count > 0">
								<image src="/static/images/icon_comment.png"></image>
								<text>{{ item.comment_count }}</text>
							</view>
							<view class="right view" v-else>
								<image src="/static/images/icon_view.png"></image>
								<text>{{ item.read }}</text>
							</view>
						</view>
					</view>
					<view class="photo">
						<image :src="item.photo_url" mode="aspectFill"></image>
					</view>
				</view>
				<view class="line"></view>
			</navigator> -->
			<!-- 		<navigator  style="background: #fff;" :url="'/pages/detail/detail?id=' + item.id" class="item" v-for="(item, index) in list" :key="index" hover-class="none">
			<view class="info">
				<view class="photo"><image :src="item.photo_url" mode="aspectFill"></image></view>
				<view class="text"  style="margin-right:0; margin-left: 22px;">
					<view class="title">{{ item.title }}</view>
					<view class="other">
						<view class="left">
							<view class="source" v-if="item.source">{{ item.source }}</view>
							<view class="time">{{ item.create_time }}</view>
						</view>
						<view class="left" v-if="item.comment_count > 0">
							<image src="/static/images/icon_comment.png"></image>
							<text>{{ item.comment_count }}</text>
						</view>
						<view class="left view" v-else>
							<image src="/static/images/icon_view.png"></image>
							<text>{{ item.read }}</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="line"></view>
		</navigator> -->
		</view>
	</view>
</template>

<script>
	// export default {
	// 	name: 'articleList',
	// 	data() {
	// 		list:[
	// 			{
	// 				title:'杨幂吴亦凡玩鳄鱼玩具，太过投入差点领错奖，网友：两个幼稚鬼',
	// 				source:'猫眼电影',
	// 				create_time:'2020-12-21',
	// 				comment_count:'',
	// 				read:'444',
	// 				photo_url:'https://pic.rmb.bdstatic.com/bjh/down/50fceb9013d48f7aeb03e40659db5e7d.jpeg@c_1,w_408,h_272,x_88,y_81'

	// 			}
	// 		]
	// 	}
	// };

	export default {
		name: 'articleList',
		props: {
			list: {
				type: Array,
				default: []
			},
			typeActivy: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// list: this.list,
				lists: [],
				imgUrl: "",
			};
		},
		watch:{
			list(e){
				this.list=e
			}
		},
		onShow() {
			console.log(this.list, '子组件中的')
		},
		onShareAppMessage() {

		},
		onLoad(e) {

		},
		onPullDownRefresh() {

		},
		mounted() {},
		methods: {
			goUrl(url) {
				// console.log(url,'222222')
				this.imgUrl = url
				// this.imgUrl='https://www.cnblogs.com/-xiao/p/CSS.html'
			}
		}
	};
</script>
<style>
	.listboxlist{line-height: 0;}
	.listboxlist:nth-last-child(1) {

		margin-right: 0 !important;

	}
</style>
<style lang="scss">
	/*文章列表*/
	.list {
		margin-top: 2rpx;

		.item {
			padding: 40rpx 24rpx 0 24rpx;

			.info {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-bottom: 4rpx;

				.text {
					flex-grow: 1;
					flex-shrink: 1;
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;

					.title {
						flex-grow: 1;
						flex-shrink: 1;
						font-size: 34rpx;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						height: 72rpx;
						margin-bottom: 8rpx;
					}

					.other {
						flex-grow: 1;
						flex-shrink: 1;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #999;
						line-height: normal;

						.left {
							display: flex;
							flex-grow: 1;
							flex-shrink: 1;

							.source {
								display: -webkit-box;
								text-overflow: ellipsis;
								word-break: break-all;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								overflow: hidden;
								width: 140rpx;
								margin-right: 16rpx;
							}
						}

						.right {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							flex-grow: 0;
							flex-shrink: 0;
							margin-right: 5rpx;

							image {
								flex-grow: 1;
								flex-shrink: 1;
								width: 28rpx;
								height: 28rpx;
								margin-right: 12rpx;
							}

							text {
								flex-grow: 1;
								flex-shrink: 1;
								margin-top: -6rpx;
							}
						}

						.view {
							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 5rpx;
							}
						}

						// .listboxlist{

						// }
					}
				}

				.photo {
					image {
						height: 170rpx;
						width: 222rpx;
						border-radius: 10rpx;
					}
				}
			}

			.line {
				display: bock;
				width: 100%;
				height: 1rpx;
				margin-top: 22rpx;
				background: #ccc;
				position: relative;
				z-index: 1;
				transform: scaleY(0.3);
			}

			&:last-child {
				.line {
					//display: none;
				}

				//padding-bottom: 30rpx;
			}
		}
	}
</style>
